.message-page {
  background: #f8faff;
  height: 100vh;

  .message-head {
    background-color: #fff;
    padding: 12px 12px 8px 12px;
    box-sizing: content-box;

    .title {
      font-weight: 400;
      font-size: 56rpx;
      color: rgba(0, 0, 0, 0.9);
      line-height: 72rpx;
      padding: 5px 2px;
    }

    .tip {
      font-weight: 400;
      font-size: 24rpx;
      color: #86909c;
      padding: 4px 0;
      margin-bottom: 15px;
    }

    .status-tag {
      display: flex;

      .status-item {
        width: 124rpx;
        height: 64rpx;
        margin-right: 10px;
        font-weight: 400;
        font-size: 28rpx;
        color: #4e5969;
        background: #f2f3ff;
        // line-height: 48rpx;
        border-radius: 28px;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 3px;
        }
      }

      .active {
        color: #007dff;
      }
    }
  }

  .message-list {
    padding: 10px;

    .tab-container {
      display: flex;
      flex-direction: column;
      height: auto;

      .tabs {
        display: flex;

        .tab-item {
          margin: 10px 15px 10px 5px;
          font-weight: 400;
          font-size: 28rpx;
          color: #86909c;
          position: relative;
        }

        .active {
          color: #007dff;
        }

        image {
          width: 48rpx;
          height: 16rpx;
          position: absolute;
          bottom: -15px;
          right: 30%;
        }
      }

      .tab-content {
        flex: 1;
        padding: 7px;
        margin-top: 13px;

        .list-item {
          background: #ffffff;
          box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          box-sizing: border-box;
          margin-bottom: 10px;

          :deep(.wd-badge) {
            width: 100%;

            // :deep(.wd-badge__content) {
            // 	top: 3px;
            // 	right: 3px;
            // 	width: 16rpx;
            // 	height: 16rpx;
            // }
          }

          .item-head {
            height: 50rpx;
            display: flex;
            justify-content: space-between;
            padding: 20rpx;
            border-bottom: 2px solid #f6f8fa;
            line-height: 20rpx;
            align-items: center;

            view {
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .type-icon {
              width: 20px;
              height: 20px;
            }

            .title {
              font-weight: 400;
              font-size: 28rpx;
              color: #3d3d3d;
              margin: 0 10px;
            }

            .status {
              margin-right: 5px;
              font-weight: 400;
              font-size: 20rpx;
              border-radius: 4rpx;
              padding: 2px 4px;
            }

            .toConfirmed {
              color: #ff9900;
              background: #fff0d9;
              border: 2rpx solid #ff9900;
            }

            .confirmed {
              color: #14c85c;
              background: #e3f9e9;
              border: 2rpx solid #14c85c;
            }

            .refuse {
              color: #f53f3f;
              background: #ffe1e1;
              border: 2rpx solid #f53f3f;
            }

            .is-read {
              font-weight: 400;
              font-size: 20rpx;
              color: #86909c;
            }

            .is-read::before {
              content: "";
              display: inline-block;
              width: 2px;
              height: 2px;
              background-color: #86909c;
              border-radius: 50%;
              margin-right: 5px;
              margin-bottom: 2px;
            }
          }

          .item-center {
            font-weight: 400;
            font-size: 24rpx;
            color: #4e5969;
            margin: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .item-bottom {
            font-weight: 400;
            font-size: 20rpx;
            color: #86909c;
            margin: 10px;
            padding-bottom: 12px;
            .time {
              float: right;
            }
            text.auto-confirm{
              color: #FF9900;
            }
          }
        }
      }
    }
  }
}